<template>
  <div class="adminHandle" >
    <el-tabs type="border-card">

      <el-tab-pane label="学生课程表">

        <el-table
          :data="tableDataCourseStudent"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="课程id">
                  <span v-show="!isEdit">{{ props.row.cid }}</span>
                  <el-input v-model="props.row.cid" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="课程名称">
                  <span v-show="!isEdit">{{ props.row.courseName }}</span>
                  <el-input v-model="props.row.courseName" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="课程地址">
                  <span v-show="!isEdit">{{ props.row.addr }}</span>
                  <el-input v-model="props.row.addr" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="课程教材">
                  <span v-show="!isEdit">{{ props.row.book }}</span>
                  <el-input v-model="props.row.book" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="教师名字">
                  <span v-show="!isEdit">{{ props.row.teacherName }}</span>
                  <el-input v-model="props.row.teacherName" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="上课周长">
                  <span v-show="!isEdit">{{ props.row.weeksOfTerm }}</span>
                  <el-input v-model="props.row.weeksOfTerm" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item label="上课日期">
                  <span v-show="!isEdit">{{ classAt(props.row.section) }}</span>
                  <el-input v-model="props.row.week" v-show="isEdit"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="warning" @click="toEdit">编辑</el-button>
                  <el-button type="primary" v-show="isEdit" @click="quitEdit">确定</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="课程id"
            prop="cid"
            sortable>
          </el-table-column>
          <el-table-column
            label="课程名称"
            prop="courseName"
            sortable>
          </el-table-column>
          <el-table-column
            label="教师名称"
            prop="teacherName"
            sortable>
          </el-table-column>
        </el-table>

        <el-input label="搜索学生学号" v-model="studentNum" placeholder="请输入学生学号" @keydown.enter.native.prevent="toSearch()"></el-input>
<!--        <el-button type="primary" @click="addPerson" class="addButton">增加学生课程表信息</el-button>-->

<!--        <div class="formBox">-->
<!--          <el-form ref="form" :model="addStudentCourse" label-width="120px">-->
<!--            <el-form-item label="课程id">-->
<!--              <el-input v-model="addStudentCourse.cid"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="教师id">-->
<!--              <el-input v-model="addStudentCourse.tid"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="课程学分">-->
<!--              <el-input v-model="addStudentCourse.credit"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="是否有考试">-->
<!--              <el-switch v-model="addStudentCourse.examFlag"></el-switch>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="是否结课">-->
<!--              <el-switch v-model="addStudentCourse.endingFlag"></el-switch>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </div>-->

      </el-tab-pane>


      <el-tab-pane label="总课程信息表">
        <el-table
          :data="tableDataCourse"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="课程id">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="课程名称">
                  <span v-show="!isEditT">{{ props.row.name }}</span>
                  <el-input v-model="props.row.name" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="教师名称">
                  <span v-show="!isEditT">{{ props.row.teacherName }}</span>
                  <el-input v-model="props.row.teacherName" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="教室">
                  <span v-show="!isEditT">{{ props.row.clazzRoomAddr }}</span>
                  <el-input v-model="props.row.clazzRoomAddr" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="课程教材">
                  <span v-show="!isEditT">{{ props.row.book }}</span>
                  <el-input v-model="props.row.book" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="课程学分">
                <span v-show="!isEditT">{{ props.row.credit }}</span>
                <el-input v-model="props.row.credit" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="节次">
                  <span v-show="!isEditT">{{ props.row.section }}</span>
                  <el-input v-model="props.row.section" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="星期">
                  <span v-show="!isEditT">{{ props.row.week }}</span>
                  <el-input v-model="props.row.week" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="周次">
                  <span v-show="!isEditT">{{ props.row.weeksOfTerm }}</span>
                  <el-input v-model="props.row.weeksOfTerm" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item label="课程时间">
                  <span v-show="!isEditT">{{ props.row.schedule }}</span>
                  <el-input suffix-icon="el-icon-date" placeholder="YYYY-MM-DD" v-model="props.row.schedule" v-show="isEditT"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="warning" @click="toEditT">编辑</el-button>
                  <el-button type="primary" v-show="isEditT" @click="quitEditT">确定</el-button>
                </el-form-item>

              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="课程id"
            prop="id"
            sortable>
          </el-table-column>
          <el-table-column
            label="课程名称"
            prop="name">
          </el-table-column>
          <el-table-column
            label="教师名称"
            prop="teacherName">
          </el-table-column>
<!--          <el-table-column-->
<!--            label="教室"-->
<!--            prop="clazzRoomAddr">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="课程时间"-->
<!--            prop="schedule">-->
<!--          </el-table-column>-->
        </el-table>

        <el-button type="primary" @click="addPersonT" class="addButton">增加课程信息</el-button>

        <div class="formBox">
          <el-form ref="form" :model="addCourse" label-width="80px">
            <div style="display: flex;justify-content: flex-start">
              <div style="margin-left: 12px;margin-right:12px;line-height:40px;font-size:14px">教师名称</div>
              <el-autocomplete
                v-model="teacherName"
                :fetch-suggestions="querySearchAsync1"
                placeholder="请选择教师"
                @select="handleSelect1"
              ></el-autocomplete>
            </div>
            <el-form-item label="课程名称">
              <el-input v-model="addCourse.name"></el-input>
            </el-form-item>
            <div style="display: flex;justify-content: flex-start">
              <div style="margin-left: 12px;margin-right:40px;line-height:40px;font-size:14px">教室</div>
              <el-autocomplete
                v-model="clazzRoom"
                :fetch-suggestions="querySearchAsync2"
                placeholder="请选择教室"
                @select="handleSelect2"
              ></el-autocomplete>
            </div>
            <el-form-item label="课程教材">
              <el-input v-model="addCourse.book"></el-input>
            </el-form-item>
            <el-form-item label="学分">
              <el-input v-model="addCourse.credit"></el-input>
            </el-form-item>
            <el-form-item label="节次">
              <el-input v-model="addCourse.section"></el-input>
            </el-form-item>
            <el-form-item label="星期">
              <el-input v-model="addCourse.week"></el-input>
            </el-form-item>
            <el-form-item label="周次">
              <el-input v-model="addCourse.weeksOfTerm"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HostCourseInit",
  data(){
    return{
      isEdit:false,
      isEditT:false,

      teacherName:'',
      clazzRoom:'',
      timeout: null,
      clazzRooms:[],
      teacherNames:[],

      studentNum:'',
      teacherNum:'',
      addStudentCourse:{
        id: 5,
        cid: 1,
        sid: 1,
        tid: 1,
        credit: 5,
        examFlag: true,
        endingFlag: false,
      },
      addCourse:{
        teacherName:'',
        name:'',
        clazzRoom: '',
        book:'',
        credit:'',
        section:'',
        week:'',
        weeksOfTerm:'',
      },
      tableDataCourse: [],
      tableDataCourseStudent:[],
    }
  },
  computed:{
    classAt: function(){
      return function(num){
        if(num === "1"){return "第一二节"}
        else if(num === "2"){return "第三四节"}
        else if(num === "3"){return "第五六节"}
        else{return "第七八节"}}

    },
  },
  watch:{
    tableDataCourse: {
      deep: true,
      handler(value) {
        console.log("发现更改", value)
      }
    },
    tableDataCourseStudent: {
      deep: true,
      handler(value) {
        console.log("发现更改", value)
      }
    }
  },
  methods:{
    toEdit(){
      this.isEdit = true
    },
    quitEdit(){
      this.isEdit = false
    },
    toEditT(){
      this.isEditT = true
    },
    quitEditT(){
      this.isEditT = false
    },
    addPerson(){
      this.tableDataCourse.push(this.addCourse)
    },
    addPersonT(){
      this.tableDataCourseStudent.push(this.addStudentCourse)

      this.addCourse.teacherName=this.teacherName
      this.addCourse.clazzRoom=this.clazzRoom

      axios.defaults.headers.common["token"] = this.token;
      axios.post((this.ip + '/course/'),this.addCourse,{headers: {'Content-Type':'application/json'}}).then((response)=>{
        console.log(response)
        console.log(response.data)

      }).catch((error)=>{
        console.log(error)
      })
      this.tableDataCourse = undefined
      this.tableDataCourse = new Array()
      axios.get((this.ip + '/course/')).then((response)=>{
        for(let i=0;i<response.data.length;i++){
          this.tableDataCourse.push({
            id:response.data[i].id,
            name:response.data[i].name,
            teacherName:response.data[i].teacherName,
            clazzRoomAddr:response.data[i].clazzRoomAddr,
            book:response.data[i].book,
            credit:response.data[i].credit,
            section:response.data[i].section,
            week:response.data[i].week,
            weeksOfTerm:response.data[i].weeksOfTerm,
            schedule:'1~' + response.data[i].weeksOfTerm + '周'
          })
        }
      }).catch((error)=>{
        console.log(error)
      })



    },
    toSearch(){
      this.ip = localStorage.getItem('ip')
      this.token = sessionStorage.getItem('token')

      axios.defaults.headers.common["token"] = this.token;
      axios.get((this.ip + '/stuCourse/admin/' + this.studentNum)).then((response)=>{
        this.tableDataCourseStudent = response.data
        console.log("student" , response.data)
      })
    },
    querySearchAsync1(queryString, cb) {
      var teacherNames = this.teacherNames;
      var results = queryString ? teacherNames.filter(this.createStateFilter1(queryString)) : teacherNames;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter1(queryString) {
      return (teacherName) => {
        return (teacherName.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect1(item) {
      console.log(item);
    },
    querySearchAsync2(queryString, cb) {
      var clazzRooms = this.clazzRooms;
      var results = queryString ? clazzRooms.filter(this.createStateFilter2(queryString)) : clazzRooms;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter2(queryString) {
      return (clazzRoom) => {
        return (clazzRoom.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect2(item) {
      console.log(item);
    }
  },
  mounted() {

    this.ip = localStorage.getItem('ip')
    this.token = sessionStorage.getItem('token')

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/course/')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++){
        this.tableDataCourse.push({
          id:response.data[i].id,
          name:response.data[i].name,
          teacherName:response.data[i].teacherName,
          clazzRoomAddr:response.data[i].clazzRoomAddr,
          book:response.data[i].book,
          credit:response.data[i].credit,
          section:response.data[i].section,
          week:response.data[i].week,
          weeksOfTerm:response.data[i].weeksOfTerm,
          schedule:'1~' + response.data[i].weeksOfTerm + '周'
        })
      }
    }).catch((error)=>{
      console.log(error)
    })

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/TEACHER/')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++){
        this.teacherNames.push({
          "value":response.data[i].name
        })
      }

    }).catch((error)=>{
      console.log(error)
    })

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/clazzRoom/all')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++){
        this.clazzRooms.push({
          "value":response.data[i].addr
        })
      }

    }).catch((error)=>{
      console.log(error)
    })
  }
}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0 10px;
  margin: 20px 100px 0 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.addButton{
  margin: 20px 0;
}
.formBox{
  margin: 0px 200px;
}
.el-button--warning:focus, .el-button--warning:hover {
  background: #00d4d9;
  border-color: #00d4d9;
  color: #FFF;
}
.el-button--warning {
  color: #FFF;
  background-color: #00a4a8;
  border-color: #00a4a8;
}
.el-form-item {
  margin: 5px 0;
}
</style>
